<template>
  <Card class="card" height="519px">
    <div class="right-container">
      <h3 class="title">程序员需求人数</h3>
      <div class="row active">
        <span class="col-1">日期</span>
        <span class="col-2">地址</span>
        <span class="col-1">人数</span>
      </div>
      <div
        class="list-container"
        @mouseenter="stopMove"
        @mouseleave="startMove"
      >
        <div :style="{ transform: `translateY(${translateY / 10}px)` }">
          <div :style="{ height: startIndex * 30 + 'px' }"></div>
          <div class="row" v-for="item in renderList" :key="item.id">
            <span class="col-1">{{ item.date }}</span>
            <span class="col-2">{{ item.address }}</span>
            <span class="col-1">{{ item.num }}</span>
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
defineOptions({
  name: "Right",
});
import { ref, onBeforeUnmount, computed } from "vue";
import Socket from "../../utils/socket";

const list = ref<any>([]);

const ws = new Socket("ws://localhost:8081");
ws.onmessage((data: any) => {
  // if (list.value.length - (startIndex.value + total) > 100) return;
  list.value = list.value.concat(data);
  if (isMove || isMouseEnter) return;
  startMove();
});

// 1. 连接ws服务
// const ws = new WebSocket("ws://localhost:8081");
// 2. 监听连接成功事件
// ws.onopen = () => {
//   console.log("连接成功");
// };
// ws.onclose = () => {
//   console.log("close");
// };
// ws.onerror = () => {
//   console.log("error");
// };
// 3. 接受服务推送消息
// ws.onmessage = (e) => {
//   const data = JSON.parse(e.data);
//   // if (list.value.length - (startIndex.value + total) > 100) return;
//   list.value = list.value.concat(data);
//   if (list.value.length > 15 && !isMove) {
//     startMove();
//   }

//   console.log("客户端接受到服务器的消息");
// };

// 滚动功能
const translateY = ref(0);
let timeId: number;
let isMove = false;
let isMouseEnter = false;

// 开始动
const startMove = () => {
  isMouseEnter = false;
  if (list.value.length <= 15) return;
  isMove = true;
  timeId = setInterval(() => {
    // 小数计算可能会精度问题
    // 将数据放大10倍变成整数，将来使用时在缩小10倍
    translateY.value -= 4;
    // 当滚动距离等于-300时，说明滚动一个元素过去。下标++
    if (translateY.value % -300 === 0) {
      startIndex.value++;
    }
  }, 1000 / 60);
};

// 停止动
const stopMove = () => {
  isMouseEnter = true;
  clearInterval(timeId);
};

onBeforeUnmount(() => {
  clearInterval(timeId);
});

// 虚拟长列表（只渲染用户看得见的内容，看不见的用空div占位）
const startIndex = ref(0); // 渲染元素起始下标
const total = 20; // 渲染元素总数

// 要渲染的元素
const renderList = computed(() => {
  return list.value.slice(startIndex.value, startIndex.value + total);
});
</script>

<style scoped lang="scss">
.title {
  color: var(--color-white);
  font-size: 12px;
  text-align: center;
  margin: 0;
  height: 30px;
  line-height: 35px;
}

.card {
  margin-top: 10px;
}

.right-container {
  padding: 0 10px;
  height: 100%;
}

.row {
  height: 30px;
  display: flex;
  align-items: center;
  text-align: center;

  color: var(--color-blue);
  font-size: 10px;
}

.active {
  background-color: var(--bg-color-100);
  color: var(--color-cyan);
}

.col-1 {
  flex: 1;
}
.col-2 {
  flex: 2;
}

.list-container {
  height: calc(100% - 65px);
  overflow: hidden;

  .row:hover {
    // 继承 active 样式
    @extend .active;
  }
}
</style>
